<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @var $this \Magento\Catalog\Block\Product\View\Gallery
 */
?>
<?php
$_product = $this->getProduct();
$_helper = $this->helper('Magento\Catalog\Helper\Output');

$image = 'product_page_main_image';

$_resizedWidth = $this->getVar("{$image}:width");
$_resizedHeight = $this->getVar("{$image}:height") ?: $_resizedWidth ;

$_hasImage = ($_product->getImage() && $_product->getImage() != "no_selection") ? true : false;

$whiteBorders =  $this->getVar("product_image_white_borders");
$thumbWidth =  $this->getVar("product_page_more_views:width");
$thumbHeight =  $this->getVar("product_page_more_views:height") ? : $thumbWidth;
?>
<div data-role="media-gallery">
    <div class="product photo main">
        <div data-role="gallery-base-image-container">
            <a <?php echo ($_hasImage) ? 'href="#" class="product photo magento-zoom"' : ' class="placeholder"'; ?>
               id="base-image" data-role="zoom-image"
               data-large="<?php echo $this->helper('Magento\Catalog\Helper\Image')->init($_product, 'image'); ?>">
                <?php echo $this->getChildBlock('product.image.main')->setAddAttribute('itemprop="image"')->init($_product, $image)->toHtml() ?>
            </a>
        </div>
        <div data-role="gallery-notice-container">
            <p class="notice" data-role="notice"></p>
        </div>
    </div>
    <?php if (count($this->getGalleryImages()) > 0): ?>

        <div class="product photo thumbs">
            <strong class="title"><?php echo __('More Views') ?></strong>
            <ul class="items thumbs">
                <?php foreach ($this->getGalleryImages() as $_image): ?>
                <?php
                $imageSmall = $this->getImageUrl($_image, 'thumbnail', $whiteBorders, $thumbWidth, $thumbHeight);
                $imageMedium = $this->getImageUrl($_image, 'image', $whiteBorders, $_resizedWidth, $_resizedHeight);
                $imageLarge = $this->getImageUrl($_image, 'image');
                ?>
                <li class="item thumb">
                    <a class="magento-zoom" data-role="gallery-thumb"
                         href ="<?php echo $imageLarge ?>"
                         data-image-small="<?php echo $imageSmall; ?>"
                         data-image-medium="<?php echo $imageMedium; ?>"
                         data-image-large="<?php echo $imageLarge; ?>"
                        <?php if ($this->isMainImage($_image)): ?>
                             data-image-selected="true"
                        <?php endif; ?>
                         title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
                        <span class="img"
                              style="position:relative; z-index:1; display:block; width:<?php echo $thumbHeight; ?>px; height:<?php echo $thumbHeight; ?>px;">
                            <img itemprop="image"
                                 src="<?php echo $imageSmall; ?>"
                                 alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>"/>
                        </span>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>
</div>
<?php if ($_hasImage): ?>
    <script data-template="gallery-wrapper" type="text/x-jQuery-tmpl">
        <div class="product photo main" style="bottom: <?php echo $thumbWidth ?>px;">
            <div data-role="gallery-base-image-container"></div>
            <div data-role="gallery-notice-container"></div>
        </div>
        <div class="product photo thumbs" data-role="gallery-thumbs-container">
        </div>
        <div class="product photo buttons" data-role="gallery-buttons-container">
        </div>
    </script>
    <script data-template="gallery-buttons" type="text/x-jQuery-tmpl">
        <a class="gallery control prev" data-role="gallery-prev" href="#"></a>
        <a class="gallery control next" data-role="gallery-next" href="#"></a>
    </script>
    <script data-template="gallery-base-image" type="text/x-jQuery-tmpl">
        <a class="product photo{{if typeof hasImg !== 'undefined'}} placeholder{{/if}}" href="${large}">
            <span class="img photo container">
                <img data-role="zoom-image" class="photo image" itemprop="image" {{if !fullSizeMode}}data-large="${large}" src="${medium}"{{else}}src="${large}"{{/if}} alt="${title}"/>
            </span>
        </a>
    </script>
    <script data-template="gallery-thumbs" type="text/x-jQuery-tmpl">
        {{if tumbsTitle}}<strong class="title">${tumbsTitle}</strong>{{/if}}
        <ul class="items thumbs">
            {{each(index, img) images}}
            <li class="item thumb">
                <a title="${img.title}" {{if img.selected}}class="active"{{/if}} data-index="${index}" data-role="gallery-thumb" href="#">
                        <span class="img">
                            <img alt="${img.title}" src="${img.small}" itemprop="image" width="${size.width}">
                        </span>
                </a>
            </li>
            {{/each}}
        </ul>
    </script>
    <script data-template="zoom-display" type="text/x-jQuery-tmpl">
        <div class="zoom lense" data-role="zoom-container">
            <div data-role="zoom-inner" class="zoom inner"></div>
        </div>
    </script>
    <script data-template="zoom-enlarged-image" type="text/x-jQuery-tmpl">
        <img data-role="enlarged-image" src="${img}" />
    </script>
    <script data-template="zoom-track" type="text/z-jQuery-tmpl">
        <div data-role="zoom-track"></div>
    </script>
    <script data-template="zoom-lens" type="text/z-jQuery-tmpl">
        <div data-role="zoom-lens"></div>
    </script>
    <script data-template="notice" type="text/x-jQuery-tmpl">
        <p class="notice" data-role="notice">${text}</p>
    </script>
    <script type="text/javascript">
        require(["jquery", "mage/mage"], function($){

            $('[data-role=media-gallery]')
                .mage('gallery', {
                    sizes: {
                        small: {
                            width: <?php echo $thumbWidth ?>,
                            height: <?php echo $thumbHeight ?>
                        },
                        medium: {
                            width: <?php echo $_resizedWidth ?>,
                            height: <?php echo $_resizedHeight ?>
                        }
                    },
                    controls: {
                        notice: {
                            text: '<?php echo $this->escapeJsQuote(__("Click on image to view it full sized")) ?>'
                        }
                    }
                })
                .mage('zoom', {
                    controls: {
                        display: {
                            left: 20,
                            top: 65
                        },
                        notice: {
                            text: '<?php echo $this->escapeJsQuote(__("Click on image to zoom")) ?>'
                        }
                    }
                })
                .mage('galleryFullScreen', {});
            
        });
</script>
<?php endif; ?>
